<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Hobby Webmaster - Home</title>
  <meta name="author" content="">
  <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Language" content="english">
  <meta http-equiv="reply-to" content="alansmlee@gmail.com">
  <meta name="Rating" content="General" />
  <meta name="revisit-after" content="30 Days" />
  <meta name="keywords" content="webmaster,hobby webmaster,hobbywebmaster,demo,test,css,html,website,web authoring,web,web page,template" />
  <meta name="description" content="Widget Visual Test" />
  <meta name="distribution" content="global" />
  <meta name="resource-type" content="document" />
	<meta http-equiv="Content-Language" content="en-us" />
  <meta name="robots" content="all" />
  <meta name="mssmarttagspreventparsing" content="true" />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta http-equiv="MSThemeCompatible" content="no" />
  <meta name="doc-class" content="Living Document" />
  <link href="typography.css" rel="stylesheet" type="text/css" />
  <link rel="SHORTCUT ICON" href="favicon.ico" type="image/x-icon" />
	<link type="text/css" rel="stylesheet" href="../../common/css/main.css"/>
  <style type="text/css">
  </style>
	<!-- compliance patch for microsoft browsers -->
	<!--[if lt IE 7]>
		<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript" ></script>
		<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/ie7-squish.js" type="text/javascript" ></script>
	<![endif]-->
</head>

<body>
  <!-- START header -->
  <div id="header">
    <div id="logo">
      <div id="slogan">Your slogan here</div>
      <div id="siteaddress">www.your.site.com</div>
      <div id="nav">
        <ul class="hmenu color-rainbow theme-transparent">
          <li><a href="../home/home.html">Home</a></li>
          <li><a href="../grasshopper/grasshopper.xml">Grasshopper</a></li>
          <li><a href="../taxidermy/taxdermy.html">Taxidermy</a></li>
          <li><a href="../photoalbum/photoalbum.html">Photo Album</a></li>
          <li><a href="../webtips/webtips.html">Web Tips</a></li>
          <li><a href="#" class="current">don't look</a></li>
        </ul>
      </div><!-- end nav -->
    </div><!-- end logo -->
  </div><!-- END header -->

  <!-- START body-container -->
  <div id="body-container">
    <!-- START left-panel -->
    <div id="left-panel">
      <dl id="vmenu">
        <dt class="current"><a href="#"><span>TBD</span></a></dt>
        <dt><a href="webSafeColor/webSafeColor.html"><span>Web Safe Colors</span></a></dt>
        <dt><a href="niceSites/niceSites.html"><span>Nice Websites</span></a></dt>
      </dl>
    </div><!-- END left-panel -->

    <!-- ++++ START of YOUR right-sidebar ++++ -->
    <div id="r-sidebar">
      <!-- Sub-page Navigation -->
      <div class="sb-nav">
        <div class="theme-transparent-bkgnd">
          <div class="heading">
            Read on
          </div>
          <ul>
            <li class="current"><a href="#">Study timetable</a></li>
            <li><a href="#">Expectation</a></li> <!-- I don't expect you to come back tonight -->
            <li><a href="#">April fool</a></li>   <!-- Proverbs fools -->
            <li><a href="#">Moving target</a></li> <!-- Shifting from one argumnent to next to avoid discussing it -->
            <li><a href="#">Beyond me</a></li> <!-- God approach and died for man -->
            <li><a href="#">What if</a></li> <!-- What If -->
            <li><a href="#">My confession</a></li> <!-- thought this is a catchy title -->
            <li><a href="#">Bigger than Ben Hur</a></li> <!-- so many angels and people -->
            <li><a href="#">I can only imagine</a></li> <!-- No eyes has ever seen (we are like playing in mud pits now) -->
          </ul>
        </div>
      </div><!-- end class=sb-nav -->

      <hr />

      <div class="sb-nav">
        <div class="theme-classic">
          <div class="heading">
            Read on
          </div>
          <ul>
            <li class="current"><a href="#">Study timetable</a></li>
            <li><a href="#">Expectation</a></li> <!-- I don't expect you to come back tonight -->
            <li><a href="#">April fool</a></li>   <!-- Proverbs fools -->
            <li><a href="#">Moving target</a></li> <!-- Shifting from one argumnent to next to avoid discussing it -->
            <li><a href="#">Beyond me</a></li> <!-- God approach and died for man -->
            <li><a href="#">What if</a></li> <!-- What If -->
            <li><a href="#">My confession</a></li> <!-- thought this is a catchy title -->
          </ul>
        </div>
      </div><!-- end class=sb-nav -->

      <hr />

      <!-- Testimonies -->
      <div class="testimony">
        <img width="59" src="../../common/img/who.gif" alt="who.gif"/>
        <span>Genuine testimonials add credential to your site.</span>
      </div>
    </div>
    <!-- -------- END of YOUR right-sidebar --------------->

    <!-- START main-content -->
    <div id="main-content">

      <!-- ++++ YOUR page title ++++ -->
      <div id="title">Home</div>
      <!-- ++++ START of YOUR navigation within main contents ++++ -->
    <div class="clearfix">
      <ul class="hmenu">
      	<li><a href="#">Home</a></li>
      	<li><a href="#" class="current">About</a>
      		<ul>
      			<li><a href="#">Vision</a></li>
      			<li><a href="#">Team</a></li>
      			<li><a href="#">Culture</a></li>
      			<li><a href="#">Careers</a></li>
      			<li><a href="#" class="here">History</a></li>
      			<li><a href="#">Sponsorship</a></li>
      		</ul>
      	</li>
      	<li><a href="#">News</a></li>
      	<li><a href="#">Proof</a></li>
      	<li><a href="#">Process</a></li>
      	<li><a href="#">Expertise</a></li>
      	<li><a href="#">Help</a></li>
      </ul>
    </div>

      <div class="rect-horizontal-link">
        <ul>
          <li><a href="#">Link one</a></li>
          <li><a href="#">Link two</a></li>
          <li><a href="#">Link three</a></li>
          <li><a href="#">Link four much longer than the rest</a></li>
        </ul>
      </div>
      <!-- -------- END of YOUR navigation within main contents --------------->
      <!-- ++++ START of YOUR main contents ++++ -->


<div class="classic-header-leftpanel-content-footer">
  <div class="header">
    <h1 class="header">W3CSchool.com</h1>
  </div>
  <div class="leftpanel">
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
  </div>
  <div class="content">
    <h2>Free Web Building Tutorials</h2>
    <p>At W3Schools you will find all the Web-building tutorials you need,
      from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
    <p>W3Schools - The Largest Web Developers Site On The Net!</p>
  </div>
  <div class="footer">
    Copyright 2009
  </div>
</div>

<div class="img-right-txt-left-wrap">
  <img src="../../common/img/smiley.jpg" width="80" /><br />
  CSS is fun!
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>
In the paragraph above, the div element is 120 pixels wide and it contains the image.
The div element will float to the right.
Margins are added to the div to push the text away from the div.
Borders and padding are added to the div to frame in the picture and the caption.
</p>
</div>

</div>



      <!-- -------- END of YOUR main contents --------------->

    </div><!-- END main content -->
  </div><!-- END body-container -->

  <!-- START footer -->
  <div id="footer">
    <a href="mailto:someone@somewhere.com">Contact us</a><span> | </span>
    <a href="#">Disclaimer</a><span> | </span>
    <a href="#">Privacy statement</a><span> | </span>
    <a href="#">Usage terms and conditions</a><span> | </span>
    <a href="#">Copyright &copy; 2008-2009 www.yoursite.com. All Rights Reserved.</a>
  </div><!-- END footer -->
  <!-- **************  -->
</body>

</html>